<template>
  <div>
    <!-- this is honor page! -->

    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/manager' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息管理</el-breadcrumb-item>
        <el-breadcrumb-item>荣誉管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs style="margin-top: 10px;" v-model="activePerson" @tab-click="handleClick">
      <el-tab-pane label="优秀学生" name="student">
        <el-card shadow="always" :body-style="{ padding: '20px' }">

          <el-table :data="goodStudentList">
            <el-table-column
              label="创建时间"
              prop="create_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="学号"
              prop="userMessage.student_num"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="简介"
              prop="summary"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="详细信息"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  width="280"
                  trigger="click"
                  content="">
                  <el-button size="small" slot="reference">点击查看详情</el-button>
                  <p>姓名: {{ scope.row.name }} </p>
                  <p>性别: {{ scope.row.userMessage.sex }} </p>
                  <p>民族: {{ scope.row.userMessage.nationality }} </p>
                  <p>年级: {{ scope.row.userMessage.grade }} </p>
                  <p>专业: {{ scope.row.userMessage.class_name }} </p>
                  <p>学院: {{ scope.row.userMessage.school_name }} </p>
                  <p>详情: {{ scope.row.detail }} </p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="荣誉列表"
              align="center">
              <template slot-scope="scope">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    显示荣誉<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in scope.row.honorList" :key="index">{{ item.value }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-button type="primary" plain size="small" @click="editGoodStudent(scope.row)">编辑</el-button>
                <el-button type="danger" plain size="small" @click="deleteGoodPerson(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页导航 -->
          <el-pagination
            background
            style="float: right; padding: 10px 0;"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="studentNum">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="金牌教师" name="teacher">
        <el-card shadow="always" :body-style="{ padding: '20px' }">

          <el-table :data="goodTeacherList">
            <el-table-column
              label="创建时间"
              prop="create_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="工号"
              prop="userMessage.teacher_num"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="简介"
              prop="summary"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="详细信息"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  width="300"
                  trigger="click"
                  content="">
                  <el-button size="small" slot="reference">点击查看详情</el-button>
                  <p>姓名: {{ scope.row.name }} </p>
                  <p>性别: {{ scope.row.userMessage.sex }} </p>
                  <p>民族: {{ scope.row.userMessage.nationality }} </p>
                  <p>学院: {{ scope.row.userMessage.school_name }} </p>
                  <p>职位: {{ scope.row.userMessage.position }} </p>
                  <p>详情: {{ scope.row.detail }} </p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="荣誉列表"
              align="center">
              <template slot-scope="scope">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    显示荣誉<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in scope.row.honorList" :key="index">{{ item.value }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-button type="primary" plain size="small" @click="editGoodTeacher(scope.row)">编辑</el-button>
                <el-button type="danger" plain size="small" @click="deleteGoodPerson(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页导航 -->
          <el-pagination
            background
            style="float: right; padding: 10px 0;"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="teacherNum">
          </el-pagination>
        </el-card>

      </el-tab-pane>
    </el-tabs>

    <!-- 更改一个优秀学生 -->
    <el-dialog
      title="编辑优秀学生"
      :visible.sync="editStudentDialog"
      width="50%"
      :before-close="handleClose">
      <span>

        <el-form :model="currentStudent" ref="editStudentForm" :rules="editStudentRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="学生介绍" prop="summary">
            <el-input v-model="currentStudent.summary"></el-input>
          </el-form-item>
          <el-form-item label="学生详情" prop="detail">
            <el-input v-model="currentStudent.detail"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(honor, index) in currentStudent.honorList"
            :label="'荣誉' + (index + 1)"
            :key="index"
            :prop="'honorList.' + index + '.value'"
            :rules="{
              required: true, message: '荣誉不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="honor.value"></el-input><el-button @click.prevent="removeHonor(honor)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editGoodPersonSubmit()">提交</el-button>
            <el-button @click="addHonor()">新增荣誉</el-button>
            <el-button @click="editStudentDialog = false">取消</el-button>
          </el-form-item>
        </el-form>

      </span>
    </el-dialog>

    <!-- 更改一个金牌教师 -->
    <el-dialog
      title="编辑金牌教师"
      :visible.sync="editTeacherDialog"
      width="50%"
      :before-close="handleClose">
      <span>

        <el-form :model="currentTeacher" ref="editTeacherForm" :rules="editTeacherRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="学生介绍" prop="summary">
            <el-input v-model="currentTeacher.summary"></el-input>
          </el-form-item>
          <el-form-item label="学生详情" prop="detail">
            <el-input v-model="currentTeacher.detail"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(honor, index) in currentTeacher.honorList"
            :label="'荣誉' + (index + 1)"
            :key="index"
            :prop="'honorList.' + index + '.value'"
            :rules="{
              required: true, message: '荣誉不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="honor.value"></el-input><el-button @click.prevent="removeHonor(honor)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editGoodPersonSubmit()">提交</el-button>
            <el-button @click="addHonor()">新增荣誉</el-button>
            <el-button @click="editTeacherDialog = false">取消</el-button>
          </el-form-item>
        </el-form>

      </span>
    </el-dialog>

  </div>
</template>

<script>
import { toDateString } from '@/utils/time.js'
export default {
  data () {
    return {
      addStudentRules: {
        userId: [
          { required: true, message: '请输入学生ID', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入学生介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入学生详情', trigger: 'blur' }
        ]
      },
      editStudentRules: {
        summary: [
          { required: true, message: '请输入学生介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入学生详情', trigger: 'blur' }
        ]
      },
      addTeacherRules: {
        userId: [
          { required: true, message: '请输入教师ID', trigger: 'blur' }
        ],
        summary: [
          { required: true, message: '请输入教师介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入教师详情', trigger: 'blur' }
        ]
      },
      editTeacherRules: {
        summary: [
          { required: true, message: '请输入教师介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入教师详情', trigger: 'blur' }
        ]
      },

      currentPage: 1,
      isStudent: true,
      goodStudentList: [],
      goodTeacherList: [],
      activePerson: 'student',
      studentNum: 0,
      teacherNum: 0,
      editStudentDialog: false,
      editTeacherDialog: false,
      currentStudent: {},
      currentTeacher: {},
    }
  },
  created () {
    this.getGoodPersonList(true)
    this.getGoodPersonList(false)
  },
  methods: {
    getGoodPersonList (status) {
      if (status) {
        this.goodStudentList = []
        this.$http.post(`board/all/getGoodTeacherOrStudentList?identity=2&page=${this.currentPage - 1}&rows=10`)
          .then(result => {
            const res = result.data
            if (!res.state) return this.$message.error(res.msg)
            let list = []
            list = this.foreachObj(res.detail.list)
            console.log(list)
            list.map(item => {
              this.$http.post(`board/all/selectGoodTeacherOrStudentById?id=${item.id}`)
                .then(resul => {
                  const resp = resul.data
                  console.log(resp)
                  item.honorList = []
                  resp.detail.honorList.forEach((honor, index) => {
                    item.honorList.push({
                      value: honor.honorContent
                    })
                  })
                  item.userMessage = resp.detail.userMessage
                  this.goodStudentList.push(item)
                })
            })
            this.studentNum = res.detail.total
          })
      }else {
        this.goodTeacherList = []
        this.$http.post(`board/all/getGoodTeacherOrStudentList?identity=3&page=${this.currentPage - 1}&rows=10`)
          .then(result => {
            const res = result.data
            if (!res.state) return this.$message.error(res.msg)
            let list = []
            list = this.foreachObj(res.detail.list)
            console.log(list)
            list.map(item => {
              this.$http.post(`board/all/selectGoodTeacherOrStudentById?id=${item.id}`)
                .then(resul => {
                  const resp = resul.data
                  console.log(resp)
                  item.honorList = []
                  resp.detail.honorList.forEach((honor, index) => {
                    item.honorList.push({
                      value: honor.honorContent
                    })
                  })
                  item.userMessage = resp.detail.userMessage
                  this.goodTeacherList.push(item)
                })
            })
            this.teacherNum = res.detail.total
          })
      }
    },

    // 更改一个优秀学生
    editGoodStudent (student) {
      this.editStudentDialog = true
      // console.log(student)
      this.currentStudent = student
    },

    // 更改一个金牌教师
    editGoodTeacher (teacher) {
      this.editTeacherDialog = true
      this.currentTeacher = teacher
    },

    // 更改一个好人按钮
    editGoodPersonSubmit () {
      if (this.isStudent) {
        this.$refs.editStudentForm.validate(valid => {
          if (!valid) return
          let url = `board/admin/updateGoodTeacherOrStudent`
          this.currentStudent.honorList.forEach((item, index) => {
            if (index === 0) {
              url += '?honorList=' + item.value
            }else {
              url += '&honorList=' + item.value
            }
          })
          let data = {}
          // 拼接上传数据
          data.detail = this.currentStudent.detail
          data.id = this.currentStudent.id
          data.summary = this.currentStudent.summary
          this.$http({
            url: url,
            method: 'post',
            data: data
          }).then(result => {
            const res = result.data
            console.log(res)
            if (!res.state) return this.$message.error(res.msg)
            this.$message.success(res.msg)
            this.editStudentDialog = false
            this.getGoodPersonList(this.isStudent)
          })
        })
      }else {
        this.$refs.editTeacherForm.validate(valid => {
          if (!valid) return
          let url = `board/admin/updateGoodTeacherOrStudent`
          this.currentTeacher.honorList.forEach((item, index) => {
            if (index === 0) {
              url += '?honorList=' + item.value
            }else {
              url += '&honorList=' + item.value
            }
          })
          let data = {}
          // 拼接上传数据
          data.detail = this.currentTeacher.detail
          data.id = this.currentTeacher.id
          data.summary = this.currentTeacher.summary
          this.$http({
            url: url,
            method: 'post',
            data: data
          }).then(result => {
            const res = result.data
            console.log(res)
            if (!res.state) return this.$message.error(res.msg)
            this.$message.success(res.msg)
            this.editTeacherDialog = false
            this.getGoodPersonList(this.isStudent)
          })
        })
      }
    },

    // 删除一个优秀的人
    deleteGoodPerson (id) {
      this.$confirm('此操作将永久删除此荣誉记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data: res } = await this.$http.post(`board/admin/deleteGoodTeacherOrStudent?id=${id}`)
          if (!res.state) return this.$message.error(res.msg)
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getGoodPersonList(this.isStudent)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    removeHonor(item) {
      if (this.isStudent) {
        if (this.addStudentDialog) {
          var index = this.addPersonForm.honorList.indexOf(item)
          if (index !== 0) {
            this.addPersonForm.honorList.splice(index, 1)
          }
        }else if (this.editStudentDialog) {
          var index = this.currentStudent.honorList.indexOf(item)
          if (index !== 0) {
            this.currentStudent.honorList.splice(index, 1)
          }
        }
      }else {
        if (this.addTeacherDialog) {
          var index = this.addPersonForm.honorList.indexOf(item)
          if (index !== 0) {
            this.addPersonForm.honorList.splice(index, 1)
          }
        }else if (this.editTeacherDialog) {
          var index = this.currentTeacher.honorList.indexOf(item)
          if (index !== 0) {
            this.currentTeacher.honorList.splice(index, 1)
          }
        }
      }
    },
    addHonor() {
      if (this.isStudent) {
        if (this.addStudentDialog) {
          this.addPersonForm.honorList.push({
            value: ''
          });
        }else if (this.editStudentDialog) {
          this.currentStudent.honorList.push({
            value: ''
          });
        }
      }else {
        if (this.addTeacherDialog) {
          this.addPersonForm.honorList.push({
            value: ''
          });
        }else if (this.editTeacherDialog) {
          this.currentTeacher.honorList.push({
            value: ''
          });
        }
      }
    },

    // 点击变更标签页状态
    handleClick(tab, event) {
      // console.log(tab, event);
      if (tab.name === 'teacher') {
        this.isStudent = false
      } else {
        this.isStudent = true
      }
      // console.log(this.isStudent)
    },

    // 更改页码，进行导航
    async handleCurrentChange (val) {
      // console.log(val)
      this.currentPage = val
      this.getGoodPersonList(this.isStudent)
    },

    // 前端处理后端数据
    foreachObj (data) {
      data.map(item => {
        item.create_time = toDateString(item.create_time)
        item.update_time = toDateString(item.update_time)
      })

      return data
    },

    handleClose(done) {
      done()
    }
  }
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #27B148;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
